<template>
  <div>
    <!-- ref获取dom的，data获取数据的 handleSelectionChange能获取到当前所选事件所有数据 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"> </el-table-column>

    <el-table-column prop="name" label="用户姓名" width="120">
    </el-table-column>

    <el-table-column label="籍贯" width="120" show-overflow-tooltip>
        <template slot-scope="scope"><span  style="color:#00d053;">+ {{scope.row.address}}</span></template>
    </el-table-column>

    <el-table-column label="投资时间" width="100">
        <template slot-scope="scope"><i class="el-icon-time"></i>{{scope.row.payDate}}</template>
    </el-table-column>

    <el-table-column label="收支类型" width="100">
        <template slot-scope="scope">{{ payTypeObj[scope.row.payType]}}</template>
    </el-table-column>


    <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
        payTypeObj: {
            1: '提现',
            2: '优惠券',
            3: '转账',
        },
        tableData: [
            {
            id: '123',
            payDate: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            payType: 1,  //数字类型，映射成字符串 - payTypeObj
            },
            {
            id: '1234',
            payDate: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            payType: 2,
            },
            {
            id: '1245',
            payDate: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            payType: 3,
            },
        ],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style>
</style>